<template>
  <div class="td-patient-me-medical">
    <mt-header :title="show?args.value:'生成病例'">
      <router-link to="/tdPatient/tdPatientMe" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button slot="right" @click.native="showMenus = true">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </mt-button>
    </mt-header>

    <el-alert
      :title="`第${args.key}步/共8步 ${args.value}`"
      :description="args.description"
      type="warning"
      :closable="false"
      v-if="show"
    ></el-alert>

    <el-alert title :description="description" type="warning" :closable="false" v-if="!show"></el-alert>

    <router-view @change="btnTo"></router-view>

    <div role="alert" class="el-alert el-alert--warning" v-if="show">
      <div class="el-alert__content">
        <p class="el-alert__description">* 点击 [保存] / [下一步] 时，数据会保存,
          <br>* 点击 [返回] / [上一步] 时，数据将不会保存
        </p>
        <i class="el-alert__closebtn el-icon-close" style="display: none;"></i>
      </div>
    </div>

    <mt-popup
      v-model="showMenus"
      position="left"
      class="td-patient-me-medical-menus"
      :modal="false"
    >
      <ul>
        <li
          v-for="(item,index) in menuList"
          :key="index"
          :class="{'current':item.isDefault}"
          @click="btnTo(item);"
        >
          <i class="fa fa-check" aria-hidden="true"></i>
          {{item.index}}&nbsp;{{item.value}}
        </li>
      </ul>
      <div class="btn-close">
        <i class="fa fa-close" aria-hidden="true" @click="showMenus = false"></i>
      </div>
    </mt-popup>
  </div>
</template>

<script>
export default {
  name: "TianDingPatientMeMedicalComponent",
  data() {
    return {
      showMenus: false,
      show: true,
      args: {
        key: 1,
        index: "第一步",
        value: "基本信息",
        isDefault: true,
        url: "tdPatientMeMedicalBasicInfo",
        description: " "
      },
      menuList: [
        {
          key: 1,
          index: "第一步",
          value: "基本信息",
          isDefault: true,
          url: "tdPatientMeMedicalBasicInfo",
          description: " "
        },
        {
          key: 2,
          index: "第二步",
          value: "目前状态",
          isDefault: false,
          url: "tdPatientMeMedicalCurrentState",
          description: " "
        },
        {
          key: 3,
          index: "第三步",
          value: "月经史",
          isDefault: false,
          url: "tdPatientMeMedicalMenstrualHistory",
          description: " "
        },
        {
          key: 4,
          index: "第四步",
          value: "生育史",
          isDefault: false,
          url: "tdPatientMeMedicalBirthHistory",
          description:
            "生育史包括：主动人流、试管经历、人工授精经历、生化妊娠、宫外孕、葡萄胎、胎停育、正常生育，请按字段顺序逐个填写"
        },
        {
          key: 5,
          index: "第五步",
          value: "婚育史",
          isDefault: false,
          url: "tdPatientMeMedicalMarriageHistory",
          description: " "
        },
        {
          key: 6,
          index: "第六步",
          value: "手术史",
          isDefault: false,
          url: "tdPatientMeMedicalPastHistory",
          description: " "
        },
        {
          key: 7,
          index: "第七步",
          value: "家族病史",
          isDefault: false,
          url: "tdPatientMeMedicalFamilyHistory",
          description: " "
        },
        {
          key: 8,
          index: "第八步",
          value: "试管详情",
          isDefault: false,
          url: "tdPatientMeMedicalTestTubeDetail",
          description: " "
        }
      ],
      description: ""
    };
  },
  mounted() {
    this.local$.removeItem("tdMeLeftMenus");
    this.local$.setItem("tdMeLeftMenus", JSON.stringify(this.args));
  },
  methods: {
    btnTo(item) {
      if (item === "detail") {
        this.menuList.filter((v, a, i) => {
          v.isDefault = false;
          return a;
        });
        // this.args = {
        //   key: -1,
        //   index: "",
        //   value: "生成病例",
        //   isDefault: false,
        //   url: "tdPatientMeMedicalDetail",
        //   description:
        //     "感谢完成病历的填写！这将更有助于医生对您的病情进行诊断。您可以继续完成之前跳过或未完成病历，或点击 [返回] 访问相关功能。"
        // };
        this.$router.push({ name: "tdPatientMeMedicalDetail" });
        this.description =
          "感谢完成病历的填写！这将更有助于医生对您的病情进行诊断。您可以点击 [右上角] 菜单图标继续完成之前跳过或未完成病历，或点击 [返回] 访问相关功能。";
        this.show = false;
        return;
      }

      if (item === "download") {
        this.menuList.filter((v, a, i) => {
          v.isDefault = false;
          return a;
        });
        this.$router.push({ name: "tdPatientMeMedicalDownload" });
        this.description = "已为您生成高清病例图片，可供打印，长按图片可以保存或转发。";
        this.show = false;
        return;
      }

      let key = item.key;

      if (item.next !== undefined) {
        key++;
      }

      if (item.prev !== undefined) {
        key--;
      }

      this.args = this.menuList.find(i => i.key === key);

      this.local$.removeItem("tdMeLeftMenus");
      this.local$.setItem("tdMeLeftMenus", JSON.stringify(this.args));

      this.args.isDefault = !this.args.isDefault;

      this.menuList.filter((v, i, a) => {
        if (this.args.key === v.key) {
          v.isDefault = true;
        } else {
          v.isDefault = false;
        }
        return a;
      });

      this.$router.push({ name: this.args.url });
      this.showMenus = false;
      this.show = true;
    }
  }
};
</script>



